<template>
	<view class="container" style="height: 100%;width: 100%;position: relative;overflow: hidden;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="设置" @clickLeft="back"/>
		<view style="width: 100%;margin: 0px auto;overflow: hidden">
			<uni-group>
				 <uni-list style="padding-top: 16px;">
					 <uni-list-item class="lock" thumb="/static/image/lock.png" title="修改密码" link @click="editPwd()"></uni-list-item>
					<view class="loginOut" @click="logeout">退出登录</view>	
				 </uni-list>
			</uni-group>
		</view>
		<view v-if="isShadow == 0 || isShadow == 1" class="shadow"></view>
		<view v-if="isShadow == 0" class="pwd_all">
			<view class="pwd_title">新密码设置</view>
			<form class="form-warp" @submit="formSubmit">
				<view style="margin-top: 20px;" class="textSize">
					旧密码
				</view>
				<view class="input-group">
					<input password v-model="old" name="old" placeholder="请输入旧密码" />
				</view>
				<view class="next" @click="next()">下一步</view>	
			</form>
		</view>
		
		<view v-if="isShadow == 1" class="pwd_newall">
			<view class="pwd_title">新密码设置</view>
			<form class="form-warp" @submit="formSubmit">
				<view style="margin-top: 20px;" class="textSize">
					新密码
				</view>
				<view class="input-group">
					<input password v-model="newpwd" name="newpwd" placeholder="请输入新密码" />
				</view>
				<view style="margin-top: 20px;" class="textSize">
					确认密码
				</view>
				<view class="input-group">
					<input password v-model="reNew" name="reNew" placeholder="请再次输入新密码" />
				</view>
				<view class="next" @click="finish()">完成</view>	
			</form>
		</view>
		
		<!-- <view v-if="isSuccess == 0" class="success">
			<view class="success_title">
				<view>
					<image style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				新密码设置成功！
			</view>
		</view> -->
		
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
		<view v-if="isOut" class="shadow"></view>
		<view v-if="isOut" class="out_all">
			<view class="pwd_title">退出登录</view>
			<view class="out_text">
				确定退出登录吗?
			</view>
			<view style="margin-top: 50px;display: flex;justify-content: space-between;">
				<view class="cancel" @click="cancel()">取消</view>
				<view class="confirm" @click="confirm()">确定</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				old: '',
				newpwd: '',
				reNew: '',
				isShadow: null, // 0旧密码 1新密码
				isSuccess: null,  // 0成功 1失败
				isOut: false,
				successContent: '', // 弹窗内容
			}
		},
		onLoad() {
			that = this;
			that.sysInfo = this.$sys.getSysInfo();
		},
		methods: {
			// 修改密码
			editPwd(){
				that.isShadow = 0
				that.old = ''
			},
			// 下一步
			next(){
				console.log('that.sysInfo.userId',that.sysInfo.userId)
				console.log('that.old',that.old)
				that.$http.post('data/person/erifyPassword', {
					fuserno: that.sysInfo.userId,
					fpassword: that.old,
				}).then(e => {
					console.log('e111',e)
					that.isShadow = 1
					that.newpwd = ''
					that.reNew = ''
				}).catch((e)=>{
					console.log('e222',e)
					that.isSuccess = 1
					that.successContent = '密码输入错误，请重新输入。'
					that.close()
				})
			},
			// 完成
			finish(){
				console.log('that.newpwd',that.newpwd)
				console.log('that.reNew',that.reNew)
				if(that.newpwd == '' || that.newpwd == ' '){
					that.isSuccess = 1
					that.successContent = '新密码不能为空'
					that.close()
					return
				}
				if(that.reNew == '' || that.reNew == ' '){
					that.isSuccess = 1
					that.successContent = '新密码不能为空'
					that.close()
					return
				}
				if(that.newpwd == that.reNew){
					that.$http.post('data/person/pwdModify2', {
						fuserno: that.sysInfo.userId,
						newPwd: that.newpwd,
					}).then(e => {
						console.log('e111',e)
						setTimeout(()=>{
							that.isShadow = null
						},2000)
						that.isSuccess = 0
						that.successContent = '新密码设置成功'
						that.close()
					}).catch((e)=>{
						console.log('e222',e)
						// that.isSuccess = 1
						// that.close()
					})
				}else{
					that.isSuccess = 1
					that.successContent = '两次输入密码不一致！'
					that.close()
				}
				
			},
			// 关闭成功失败弹窗
			close(){
				setTimeout(()=>{
					that.isSuccess = null
				},2000)
			},
			// 取消
			cancel(){
				that.isOut = false
			},
			// 确定
			confirm(){
				that.isOut = false
				that.$util.reLaunch('login/index')
			},
			logeout() {
				that.isOut = true
				
				// that.$util.showModal('退出登录','确定退出登录吗?',function(){
				// 	that.$util.redirectTo('login/index')
				// },'取消','确定',true)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	/* 遮罩层 */
	.shadow{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FAFCFD;
		opacity: 0.85;
	}
	.out_all{
		width: 85%;
		margin: 0 auto;
		height: 200px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 28%;
		bottom: 0;
		padding: 16px;
	}
	.cancel{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.confirm{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.success{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
		z-index: 99999;
	}
	.error{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
		z-index: 99999;
	}
	.success_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 18px; */
	}
	.out_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin: 12px 0 0 10px;
	}
	.success_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin-left:10px;
	}
	.success_content{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin-top: 6px;
	}
	.next{
		width: 100%;
		height: 48px;
		text-align: center;
		line-height: 48px;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
		margin-top: 60px;
	}
	.pwd_title{
		width: 100%;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 40px;
		/* identical to box height, or 167% */
		color: #113A62;
		margin-top: 15px;
	}
	.pwd_all{
		width: 85%;
		margin: auto;
		height: 282px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
	.pwd_newall{
		width: 85%;
		margin: auto;
		height: 372px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
	.loginOut{
		width: 92%;
		margin: 16px auto;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin-bottom: 16px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		/* identical to box height, or 100% */
		text-align: center;
		letter-spacing: -0.4px;
		color: #113A62;
		opacity: 0.6;
	}
	
	.form-warp {
		zoom: 1;
	}
	
	.form-warp:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}
	
	.input-group {
		position: relative;
		margin-top: 8px;
	}
	
	.input-group .uni-icons {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 48rpx;
		top: 20rpx;
		border-right: 1rpx solid #dedede;
		padding-right: 10rpx;
		font-size: 30rpx !important;
	}
	
	.input-group input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 25px;
		background: #ffffff;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	
	/*解决光标大小不一致问题*/
	.uni-input-input {
		height: 100%;
		line-height: normal;
	}
	
	.account{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		/* identical to box height, or 157% */
		display: flex;
		align-items: center;
		color: #8B9EB0;
		margin-top: 40px;
	}
</style>
